---
sidebar_position: 1
description: Learn how to configure a Line chart
---
import CodeBlock from "@theme/CodeBlock";
import { PropsTable } from '@site/src/components/PropsTable'
import { data, generateDataRecords } from '../utils/data'
import { XYWrapper, XYWrapperWithInput } from '../wrappers'

export const lineProps = (n=10) => ({
  name: "Line",
  height: 150,
  data: generateDataRecords(n),
  x: d=>d.x,
  y: d=>d.y,
});

## Basic Configuration
The _Line_ component has been designed to work together with _XY Container_. The minimal _Line_ configuration looks like:

<XYWrapper {...lineProps()} showContext="full"/>


## Multiple Lines
_Line_ can also accept an array of `y` accessors to display multiple lines:
<XYWrapper {...lineProps()} showContext="minimal" y={[d => d.y, d => d.y1, d => d.y2]}/>

## Line Appearance
### Width
Specify the Line's width in pixels using the `lineWidth` property:
<XYWrapperWithInput {...lineProps()} property="lineWidth" inputType="number" defaultValue={5}/>

### Curve Type
Using the `curveType: CurveType` property you can set various curve type options. For example:
<XYWrapperWithInput {...lineProps(50)} inputType="select" options={["basis", "linear", "step"]} defaultValue="basis" property="curveType"/>

### Color
<XYWrapperWithInput {...lineProps()} property="color" inputType="color" defaultValue="#a611a5"/>

#### For multiple lines:
If you want to set color for multiple lines at once, you'll have to define a colors array in your component and reference colors by index in the accessor function:
<XYWrapper {...lineProps()} showContext={true} y={[d => d.y, d => d.y1, d => d.y2]} color={(d,i) => ['red', 'green', 'blue'][i]}/>


### Dashes
You can configure a dashed line with the lineDashArray property and a dash array. See [SVG stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
to learn more about this attribute.

<XYWrapper {...lineProps()} lineDashArray={[5]} />

#### For multiple lines:
Similar to [mutlti-color configuration](#for-multiple-lines), you can provide an accessor function to
customize each line.

## Dealing with missing data
### Fallback Value
In the case of missing data (when the data values are `undefined`, `NaN`, `''`, etc ...), you can assign a fallback value
for _Line_ using the `fallbackValue` config property. The default value is `undefined`, which means that the line will
break in the areas of no data and continue when the data appears again. If you set `fallbackValue` to `null`, the values
will be treated as numerical `0` values and the line won't break; however if the whole dataset consists of only `null`s,
the line won't be displayed.

Consider the following example, where the dataset contains `undefined` values over in the following domain:
`4 <= x <= 6`

<XYWrapperWithInput {...lineProps()}
  data={generateDataRecords(10).map((d,i) => ({ x: d.x, y: i >= 4 && i <= 6 ? undefined : d.y }))}
  property="fallbackValue"
  inputType="range"
  inputProps={{ min: 0, max: 15, step: 0.5 }}
  defaultValue={7}
  showAxes/>

### Line Interpolation
Alternatively, you can set the `interpolateMissingData` property to `true` to fill in the data gaps with a dashed line.
If `fallbackValue` is set, those values will be plotted on the inteprolated line.
Otherwise, it will be a smooth curve between defined points, like below:

<XYWrapper {...lineProps()}
  data={[1, 3, 4, undefined, undefined, undefined, 5, 7, 9, 6].map((y, x) => ({ x, y }))}
  showAxes
  interpolateMissingData={true}
/>

You can customize the appearance of of the interpolated line with the following CSS varibles:

```css
--vis-line-gapfill-stroke-dasharray: 2 3;
--vis-line-gapfill-stroke-opacity: 0.8;
--vis-line-gapfill-stroke-dashoffset: 0;
```

## Events
```ts
import { Line } from '@unovis/ts'
...
const events = {
  [Line.selectors.line]: {
    mouseover: (data: DataRecord[]) => {},
    mouseleave: (data: DataRecord[]) => {},
    ...
  }
}
```
<XYWrapper hideTabLabels {...lineProps()} events={{}}/>

## CSS Variables
The _Line_ component supports additional styling via CSS variables that you can define for your visualization container. For example:

```css title="styles.css"
.custom-line {
  --vis-line-cursor: cell;
  --vis-line-stroke-dasharray: 55 15;
  --vis-line-stroke-dashoffset: 0;
}
```
<XYWrapper {...lineProps()} excludeTabs className="custom-line" lineWidth={5} />

<details open>
  <summary>Supported CSS variables and their default values</summary>
  <CodeBlock language="css">
{`--vis-line-cursor: default;
--vis-line-stroke-dasharray: none;
--vis-line-stroke-dashoffset: 0;`}
  </CodeBlock>
</details>


## Component Props
<PropsTable name="VisLine"></PropsTable>
